<template>
  <div class="goods-list">
    <el-card class="query-search">
      <el-form ref="formRef" class="query-search-form" :model="queryParam" inline>
        <el-form-item label="商品名称" prop="goodsName">
          <el-input v-model="queryParam.goodsName" size="small"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="queryParam.price" size="small"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="getDataList">查询</el-button>
          <el-button size="small" type="info" @click="doClear">清空</el-button>
        </el-form-item>
      </el-form>
      <el-button @click="addData" size="small" type="success">新增</el-button>
    </el-card>
    <div class="table-wrap">
      <el-table border :span-method="arraySpanMethod" v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column prop="goodsName" label="商品名称" />
        <el-table-column label="一级类型" prop="type" width="100">
          <template #default="scope">
            {{ GoodsTypeEnum[scope.row.type as number] }}
          </template>
        </el-table-column>
        <el-table-column label="商品图片" width="120">
          <template #default="scope">
            <img class="goods-picture" :src="scope.row.goodsPicture">
          </template>
        </el-table-column>
        <el-table-column label="商品价格" width="200">
          <template #default="scope">
            <el-tag class="ml-2" type="success">{{ scope.row.price }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="库存" width="100" />
        <el-table-column prop="description" label="商品描述" show-overflow-tooltip />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="small" @click="doEdit(scope.row)">编辑</el-button>
            <el-button size="small" @click="doDetail(scope.row.id)">查看</el-button>
            <el-popconfirm title="确认删除此商品?" @confirm="doDelete(scope.row.id)">
              <template #reference>
                <el-button size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="page-pagin" v-model:current-page="pageNum" v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]" :small="true" layout="total, prev, pager, next" :total="total"
        @size-change="handleChangeSize" @current-change="handleChangePage" />
    </div>
    <!-- <GoodsInfo v-if="showDialog" @closeDialog="closeDialog"></GoodsInfo> -->
    <GoodsInfo ref="goodsInfoRef" @refreshData="getDataList"></GoodsInfo>
  </div>
</template>
<script lang="ts" setup>
import { FormInstance } from 'element-plus';
import { onMounted } from 'vue';
import {ref} from 'vue'
import GoodsInfo from './GoodsInfo.vue';
import {IGoodsInfo,IGoodsListQuery, GET_GOODS_LIST, DELETE_GOODS, GET_DETAIL} from '@/api/goods'
import GoodsTypeEnum from '@/enum/GoodsTypeEnum'
import { rowspan } from '@/utils/utils';
// const showDialog = ref(false)
// const closeDialog = () => {
//   showDialog.value = false
// }
const pageSize = ref(10)
const pageNum = ref(1)
const total = ref(0)
const goodsInfoRef = ref()
const formRef = ref<FormInstance>()
const tableData = ref<IGoodsInfo[]>([])

interface SpanMethodProps {
  row: any
  column: any
  rowIndex: number
  columnIndex: number
}
const arraySpanMethod = ({
  rowIndex,
  columnIndex
}: SpanMethodProps) => {
  // return handleSpanMethod({rowIndex, columnIndex, column}, {'type': tagRowSpan(tableData.value, 'type')}, ['type'])
  if (columnIndex === 1) {
    const spanArr = rowspan(tableData.value, 'type')
    console.log(spanArr)
    const _row = spanArr[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col,
    };
    // if (rowIndex === 0) {
    //   return {
    //     rowspan: 2,
    //     colspan: 1,
    //   }
    // } else {
    //   return {
    //     rowspan: 0,
    //     colspan: 0,
    //   }
    // }
  } else if(columnIndex === 4) {
    const spanArr = rowspan(tableData.value, 'number')
    // console.log(spanArr)
    const _row = spanArr[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col,
    };
  }
  
}
// 获取数据的方法
const getDataList = (isInitQuery?: boolean) => {
  console.log(111)
  loading.value = true
  if(isInitQuery === true) {
    //重置条件
    doClear()
  }
  console.log(queryParam.value.cusData)
  //使用setTimout模拟了数据
  let params: IGoodsListQuery = {
    goodsName: queryParam.value.goodsName,
    price: queryParam.value.price,
    pageNum: pageNum.value,
    pageSize: pageSize.value
  }
  GET_GOODS_LIST(params).then((res: any) => {
    console.log(res)
    loading.value = false
    total.value = res.total
    tableData.value = res.list
    // console.log(tagRowSpan(tableData.value, 'type'))
  })
  // setTimeout(() => {
  //   tableData.value = [{
  //     id: '1',
  //     goodsName: '华为手机',
  //     type: 1,
  //     childType: '1',
  //     goodsPicture: 'https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/plp/phones-new/mate-60-pro/kv.jpg',
  //     price: Math.ceil(Math.random()*2000) + 3000,
  //     description: '挺好用的华为手机',
  //     number: 5000
  //   },
  //   {
  //     id: '2',
  //     goodsName: '杰克琼斯',
  //     type: 2,
  //     childType: '4',
  //     goodsPicture: 'https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/plp/phones-new/mate-60-pro/kv.jpg',
  //     price: Math.ceil(Math.random()*1000) + 2000,
  //     description: '挺好用的荣耀手机挺好用的荣耀手机挺好用的荣耀手机挺好用的荣耀手机挺好用的荣耀手机挺好用的荣耀手机挺好用的荣耀手机',
  //     number: 2000
  //   }]
  //   loading.value = false
  // }, 1000)
}
onMounted(() => {
  console.log(333)
  getDataList()
})

const queryParam = ref({
  goodsName: '',
  cusData: '123123',
  price: null
})
const handleChangeSize = (value: number) => {
  console.log(value)
  pageSize.value = value
  pageNum.value = 1
  getDataList()
}
const handleChangePage = (value: number) => {
  pageNum.value = value
  getDataList()
}
const doClear = () => {
  console.log('clear')
  // formRef.value?.resetFields()
  queryParam.value = {
    goodsName: '',
    cusData: '',
    price: null
  }
  getDataList()
}
const addData = () => {
  console.log('doAdd')
  // showDialog.value = true
  goodsInfoRef.value.dialogVisible = true
  goodsInfoRef.value.playType = 'add'
  goodsInfoRef.value.setChildType()
}
const doEdit = (data: IGoodsInfo) => {
  goodsInfoRef.value.dialogVisible = true
  goodsInfoRef.value.playType = 'edit'

  goodsInfoRef.value.setData(data)
}
const doDetail = async (id: string) => {
  goodsInfoRef.value.dialogVisible = true
  const detail = await GET_DETAIL(id)
  goodsInfoRef.value.setData(detail)
  goodsInfoRef.value.playType = 'detail'
}
const doDelete = async (id: string) => {
  const res = await DELETE_GOODS(id)
  console.log(res)
  getDataList()
}
const loading = ref(false)


</script>
<style scoped lang="scss">
.goods-list {
  .query-search {
    margin-bottom: 20px;

    :deep() .el-card__body {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .query-search-form {
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }

  .table-wrap {
    .goods-picture {
      height: 120px;
      width: 120px;
    }
  }

  .page-pagin {
    margin-top: 10px;
    justify-content: flex-end;
  }
}
</style>@/api/goods